<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .title {
            background-color: orange;
            font-family: Algerian;
        }
    </style>
</head>
<body>
<!--准备好一个"容器"-->

<div id="test"></div>

<!--引入库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>


<script type="text/babel">
    const myId = "fig";
    const myData = "Hello world";
    //1.创建虚拟DOM
    const VDOM = (
        <div>
            <h2 className="title" id={myId.toLowerCase()}>
                <span style={{color: 'red', fontSize: '18px'}}>{myData.toLowerCase()}</span>
            </h2>
            <h2 className="title" id={myId.toUpperCase()}>
                <span style={{color: 'red', fontSize: '18px'}}>{myData.toLowerCase()}</span>
            </h2>
        </div>
    );
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'));

    /***
     * jsx语法规则
     *  1.定义虚拟DOM时，不要写引号
     *  2.标签中混入JS表达式时要用{}
     *  3.样式类名指定用className
     *  4.内联样式，要用style={{key:value}}的形式去写
     *  5.只有一个标签
     *  6.标签必须闭合
     *  7.标签首字母
     *      (1)若小写字母开头，则将标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
     *      (2)若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
     */

</script>

</body>
</html>
